<div class="aggregation">
  <ng-container *ngIf="loading">
    <div class="aggregation__loader">
      <hs-loader class="aggregation__loader-icon"></hs-loader>
      <span>loading</span>
    </div>
  </ng-container>

  <ng-container *ngIf="dataAvailable; else noDataAvailable">
    <div class="aggregation__header">
      <hydro-icon
        *ngIf="canLoadLeft"
        type="icon-left"
        (click)="loadOlder()"
        class="aggregation__header-nav-button"
      >
      </hydro-icon>
      <div class="aggregation__header-selected">
        <div>
          Requests:
          <span class="aggregation__header-count">{{ totalRequests }} </span>
        </div>
        <div>
          Showed:
          <span class="aggregation__header-count">{{ currentRequests }} </span>
        </div>
        <div>
          <span>{{ firstId | checkIdToTime | hsFormatDate }}</span> -
          <span>{{ lastId | checkIdToTime | hsFormatDate }}</span>
        </div>
      </div>
      <hydro-icon
        *ngIf="canLoadRight"
        type="icon-right"
        (click)="loadNewest()"
        class="aggregation__header-nav-button"
      >
      </hydro-icon>
    </div>
    <div class="aggregation__features-label">Features</div>
    <div class="aggregation__body" *ngIf="featureNames">
      <ul class="aggregation__labels" [ngStyle]="{ 'width.px': labelsWidth }">
        <li class="aggregation__labels-item" *ngFor="let label of featureNames">
          {{ label }}
        </li>
      </ul>
      <div class="aggregation__checks">
        <svg [attr.width]="canvasWidth" [attr.height]="canvasHeight">
          <defs>
            <linearGradient id="Gradient-1" x1="0" y1="0" x2="25%" y2="25%">
              <stop offset="0%" stop-color="black" />
              <stop offset="50%" stop-color="black" />
              <stop offset="50%" stop-color="white" />
              <stop offset="100%" stop-color="white" />
            </linearGradient>

            <linearGradient
              id="repeat"
              xlink:href="#Gradient-1"
              spreadMethod="repeat"
            />
          </defs>
          <g
            *ngFor="let column of aggregation; let columnIndex = index"
            class="column"
            [attr.transform]="columnTranslate(columnIndex)"
            (click)="changeActiveColumn(column)"
            [ngClass]="{ 'column--active': isSelected(column) }"
          >
            <rect
              *ngFor="let featureName of featureNames; let rowIndex = index"
              [attr.width]="CELL_SIZE"
              [attr.height]="CELL_SIZE"
              [attr.fill]="cellColor(column, featureName)"
              [attr.transform]="rowTranslate(rowIndex)"
            ></rect>
          </g>
        </svg>
      </div>
    </div>
    <ng-container *ngIf="metricNames && metricNames.length">
      <div class="aggregation__metrics-label">Metrics</div>
      <div class="aggregation__body" *ngIf="metricNames">
        <ul class="aggregation__labels" [ngStyle]="{ 'width.px': labelsWidth }">
          <li
            class="aggregation__labels-item"
            *ngFor="let label of metricNames"
          >
            {{ label }}
          </li>
        </ul>
        <div class="aggregation__checks">
          <svg [attr.width]="canvasWidth" [attr.height]="metricsCanvasHeight">
            <g
              *ngFor="let column of aggregation; let columnIndex = index"
              class="column"
              [attr.transform]="columnTranslate(columnIndex)"
              (click)="changeActiveColumn(column)"
              [ngClass]="{ 'column--active': isSelected(column) }"
            >
              <rect
                *ngFor="let metricName of metricNames; let rowIndex = index"
                [attr.width]="CELL_SIZE"
                [attr.height]="CELL_SIZE"
                [attr.fill]="metricCellColor(column, metricName)"
                [attr.transform]="rowTranslate(rowIndex)"
              ></rect>
            </g>
          </svg>
        </div>
      </div>
    </ng-container>

    <ng-container *ngIf="metricNames && metricNames.length">
      <div class="aggregation__batches-label">Batch metrics</div>
      <div class="aggregation__body" *ngIf="metricNames">
        <ul class="aggregation__labels" [ngStyle]="{ 'width.px': labelsWidth }">
          <li
            class="aggregation__labels-item"
            *ngFor="let batchName of batchNames"
          >
            {{ batchName }}
          </li>
        </ul>
        <div class="aggregation__checks">
          <svg
            [attr.width]="canvasWidth"
            [attr.height]="batchMetricsCanvasHeight"
          >
            <g
              *ngFor="let column of aggregation; let columnIndex = index"
              class="column"
              [attr.transform]="columnTranslate(columnIndex)"
              (click)="changeActiveColumn(column)"
              [ngClass]="{ 'column--active': isSelected(column) }"
            >
              <rect
                *ngFor="let batchMetricName of batchNames; let rowIndex = index"
                [attr.width]="CELL_SIZE"
                [attr.height]="CELL_SIZE"
                [attr.fill]="batchMetricCellColor(column, batchMetricName)"
                [attr.transform]="rowTranslate(rowIndex)"
              ></rect>
            </g>
          </svg>
        </div>
      </div>
    </ng-container>
  </ng-container>
</div>

<ng-template #noDataAvailable>
  <div class="aggregation__message">
    No data available. Waiting data ...
  </div>
</ng-template>
